<style lang="less" scoped>

.sucaiimg_data{
  background: white;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  width: 61vw;
  margin-left: 18.5vw;
  font-size: 0px;
  .sucaititle{
    font-size: 1.1vw;
  }
  .cjsjdata_list{
    min-height: 35vw;
  }
  .sucai_img{
    cursor:pointer;
    width: 100%;
    height: 8vw;
    border: 1px solid #dededd;
  }
  .sucai_title{
    width: 100%;
    text-align:center;
    font-size: 0.9vw;
    height: 3vw;
  }
  .fistimg{
    width: 61vw;
  }
  .footimg{
    width: 61vw;
  }
  
}
  .afftix-data{
    position:relative;
    width: 10vw;
    margin-left: 5.7vw;
    .affix_title_img{
      position: absolute;
      width: 6vw;
      left: 0vw;
      top: 2vw;
    }
    .afftix-data-list{
      position: absolute;
      width: 10vw;
      box-sizing: border-box;
      border: 0.15vw solid #FF8D2F;
      border-radius: 1vw;
      background: white;
      left:2.5vw;
      padding: 0;
    }
    .afftix-data-item{
      cursor:pointer;
      height:2vw;
      width: 9.82vw;
      font-size: 1vw;
      color: black;
      margin-left: -0.05vw;
      
    }
    .afftix-data2-item{
      cursor:pointer;
      background: #858382;
      color: white;
      height:2vw;
      width: 9.82vw;
      margin-left: -0.05vw;
      // padding: 0.5vw;
    }
    .afftix-title{
      line-height: 2vw;
      text-align-last:justify;
      margin:0 auto;
      font-size: 0.9vw;
    }
    .afftix-data-item:hover{
      background: #A9A9A9;
      color: white;
    }
    .afftix-fenge{
      background: #A9A9A9;
      width: 9.7vw;
      opacity:0.2;
      height: 0.01vw;
      margin-left: 0.05vw;
    }
  }
</style>
<template>
  <div >
    <MainUser></MainUser>
    <div v-if="size>12" style="height:3.2vw"></div>
    <affix v-if="size>12" style="margin-top:-3.2vw">
      <MainTitle @sousuo="titleSousuo"></MainTitle>
    </affix>
    <MainTitle v-if="size<=12"  @sousuo="titleSousuo"></MainTitle>
    <affix :offset="height*0.3" style="width:10vw;">
      <div class="afftix-data">
        
        <div class="afftix-data-list">
          <div v-for="(data,i) in types" >
            <div class="afftix-fenge" v-if="i != 0"></div>
            <div class="afftix-data-item"  v-if="type != data.type && i == types.length-1" style="border-radius: 0 0 0.9vw 0.9vw;margin-bottom:-0.05vw">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
            <div class="afftix-data2-item"  v-if="type == data.type && i == types.length-1" style="border-radius: 0 0 0.9vw 0.9vw;margin-bottom:-0.05vw;">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
            <div class="afftix-data-item"  v-if="type != data.type && i == 0" style="border-radius: 0.9vw 0.9vw 0 0;margin-top:-0.05vw">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
            <div class="afftix-data2-item"  v-if="type == data.type && i == 0" style="border-radius: 0.9vw 0.9vw 0 0;margin-top:-0.05vw;">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
            <div class="afftix-data-item"  v-if="type != data.type && i != types.length-1 && i != 0">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
            <div class="afftix-data2-item"  v-if="type == data.type && i != types.length-1 && i != 0">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
          </div>
        </div>
        <el-image
          class="affix_title_img"
          :src="titleimg"
          :fit="'cover'" ></el-image>
      </div>
      
      
        
    </affix>
    <div class="sucaiimg_data">

      <div style="height:0.5vw"></div>
      <div class="sucaititle" >常见设计问题</div>
      <div class="cjsjdata_list" v-loading="loading">
        <el-row :gutter="10" >
          <el-col :span="6" v-for="(item,i) in design_problems_data">
            <el-image 
              class="sucai_img" 
              :src="item.thumb" 
              :preview-src-list="[item.thumb]"
              :fit="'cover'">
            </el-image>
            <div class="sucai_title">{{item.title}}</div>
          </el-col>
        </el-row>
      </div>
      <el-pagination
        background
        style="text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next,sizes"
        :current-page="pagintion.page"
        :page-sizes="pagesizes"
        :page-size="pagintion.page_size"
        :total="pagintion.total">
      </el-pagination>
      <div style="height:3vw;"></div>
    </div>
    
  </div>
</template>
<script>
import MainTitle from '../main_title'
import MainUser from '../main_user'
import { design_problems } from '@/request/api';
export default {
    data() {
        return {
          titleimg:require("../../../images/affix_title_img2.png"),
            type:'',
            title:'',
            design_problems_data:[],
            pagintion: {
              total: 0,
              page_size:50,
              page: 1,
            },
            loading:false,
            pagesizes: [50,100],
            size:0,
            keywords:'',
            height:window.screen.height,
            types:[
                    {type:1,name:'模块问题'},
                    {type:2,name:'设计问题'},
                    {type:3,name:'选项问题'},
                    {type:4,name:'不合理问题'},
                    {type:5,name:'其它问题'},
                  ],
            typewidth:'width:4vw',
        }
    },
    mounted() {
      this.type = this.$route.query.type;
      this.getimglist();
      var typelenght = 4;
      for(var i in this.types){
        if(this.types[i].name.length > typelenght){
          typelenght = this.types[i].name.length;
          this.typewidth = 'width:'+typelenght*0.9+'vw;'
        }
      }
    },
    methods: {
        //点击侧边栏
        downaffitx(type){
          this.type = type;
          this.getimglist();
        },
        //修改条数
        handleSizeChange(val){
          this.pagintion.page_size = val;
          this.getimglist();
        },
        //翻页
        handleCurrentChange(val) {
            this.pagintion.page = val;
            this.getimglist();
        },
        //获取系列列表数据
        getimglist(){
          var param = {};
            param.page = this.pagintion.page;
            param.size = this.pagintion.page_size;
            param.keywords = this.keywords;
            param.type = this.type;
            this.loading = true;
          design_problems(param).then(res => {
            this.loading = false;
            if(res.ok){
              this.design_problems_data = res.data.data;
              this.pagintion.total = res.data.total;
              this.size = this.design_problems_data.length;
            }
          })
        },
        titleSousuo(keywords){
            this.keywords = keywords;
            this.getimglist();
        }
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
